<template>
  <section class="c-p" :class="[!isSetPageBackground ? 'c-bg-white' : '', item.templateType == 2 ? 'c-flex-row' : '']" ref="tabInner">
    <!-- 标签导航 -->
    <template v-if="item.templateType == 1">
      <!-- 顶部导航 -->
      <div :class="item.position == 2 && cssSupportSticky == false && isTabFixed ? 'tabHeight' : ''" style="visibility: hidden"></div> <!-- 导航固定时，文件流高度变短，设置空白替代 -->
      <div
        :class="[item.position == 2 && cssSupportSticky ? 'sticky' : (isTabFixed ? 'fixed' : 'c-p'), !isSetPageBackground ? 'c-bg-white' : 'pageBgColor']"
        class="c-pz99 c-pr24 c-pl24"
        :style="getVerticalSpacing(marginSettings, 3) + getHorizontalSpacing(marginSettings)"
      >
        <div ref="tabHeader">
          <div class="c-pb10 c-contexty-hidden c-contextX-scroll c-flex-row c-aligni-center c-ws-n tabBox c-p">
            <div ref="tabList" class="c-flex-row c-aligni-center">
              <span v-for="(tab, index) in item.items" :key="index" @click="changeTab(index)" class="c-lh36 c-mr40 c-p c-pv18"
                :style="getHeadLineTitle(headLine, 0)"
                :class="[pageTextColor ? 'pageTextColor' : '', tabIndex == index ? 'fwb c-fs26 c-fc-xblack' : 'c-fs24 c-fc-sblack']">
                {{tab.name}}
                <span class="tabActive" :class="pageTextColor ? 'pageTab' : 'theme-bg'"
                  :style="headLine && headLine.custom == 2 && headLine.title && headLine.title.color ? `background-color: ${headLine.title.color};` : ''"
                  v-if="tabIndex == index"
                >
                </span>
              </span>
            </div>
            <template v-if="item.isShowMore != 1">
              <div class="c-fs18 c-flex-1 c-flex-row c-justify-end c-p" :class="[pageTextColor ? 'pageTextColor' : 'c-fc-gray']" :style="getHeadLineMore(headLine)">
                <div v-if="item.showMoreType == 2" @click="clickMore(0)">更多</div>
                <div v-else-if="item.showMoreType == 3" @click="clickMore(0)" class="iconfont">&#xe908;</div>
                <div v-else @click="clickMore(0)" class="c-flex-row c-aligni-center">
                  <span>更多</span><i class="iconfont icon c-fs18" :style="getHeadLineMore(headLine)">&#xe908;</i>
                </div>
                <wx-open-launch-weapp
                  v-if="showLaunchWeapp"
                  :id="'launchBtn'"
                  :appId="appID"
                  :path="wechatUrl"
                  class="c-w100 c-h c-text-hidden c-pa c-p-t0 c-p-l0"
                  @error="handleErrorFn"
                  @launch="handleLaunch"
                  @ready="handleReady"
                >
                  <script type="text/wxtag-template">
                    <style>.masker {width: 100%;height: 40px;opacity: 0}</style>
                    <span class="masker">立即跳转</span>
                  </script>
                </wx-open-launch-weapp>
              </div>
            </template>
          </div>
          <section class="c-flex-row c-pz99 c-fc-white c-aligni-center c-pb24 c-p" :class="!isSetPageBackground ? 'c-bg-white c-bd-b1-f5 boxShadowWhite' : ''" :style="getVerticalSpacing(marginSettings, 2)" v-if="item.items[tabIndex].childNavigation">
            <div class="c-flex-row c-aligni-baseline c-w100 c-pz99">
              <div class="c-text-hidden c-flex-1">
                <div ref="tabScroll" class="c-contexty-hidden c-contextX-scroll c-flex-row c-aligni-center c-ws-n c-p">
                  <div
                    :style="secondTabIndex == i && headLine && headLine.custom == 2 && headLine.title && headLine.title.color ? `background-color: ${headLine.title.color};` : ''"
                    class="c-mr20 c-p c-flex-shrink0 c-fs22 c-ph12 c-pv8 c-br8"
                    :class="secondTabIndex == i ? (pageTextColor ? 'pageTab' : 'theme-bg') + ' c-fc-white c-bd1-white' : 'c-fc-gray c-bg-f5 bd1-eb'"
                    :id="'tabItem' + i"
                    :key="i"
                    v-for="(obj, i) in item.items[tabIndex].items"
                    @click="changeSecondTab(i)"
                  >{{obj.name}}
                  </div>
                </div>
              </div>
              <div
                v-if="showTabInner"
                class="iconfont c-fs28 c-fs24 c-ml26 c-mt5 c-pz99 close c-fc-gray"
                :class="!isShow ? 'c-rotate180' : ''"
                @click="clickClose"
              >&#xe67a;</div>
            </div>
            <!-- 全部标签半弹窗 -->
            <transition name="fade-opacity50">
              <div class="mask c-m-0auto c-p-t0" @click="clickClose" v-show="isShow">
                <div class="c-pa c-pz100 c-w100 c-p-l0 c-p-r0 c-p-t48 c-m-0auto c-br-bl20 c-br-br20 c-text-hidden">
                  <transition name="fade-translatey">
                    <div class="c-ph24 c-pt20 c-fs24 c-fc-sblack c-bg-white c-p c-pz100 c-w100 c-maxw640" v-show="isShow">
                      <div class="c-fs24 c-fw-b c-pb20">全部分组</div>
                      <div class="c-text-hidden c-flex-row c-flexw-wrap">
                        <div
                          v-for="(obj, i) in item.items[tabIndex].items" :key="i"
                          @click.stop="changeSecondTab(i)"
                          :class="secondTabIndex == i ? 'theme-bg c-fc-white' : 'c-fc-gray c-bg-f5'"
                          class="c-fs22 c-ph12 c-pv8 c-br8 c-mb20 c-mr20"
                        >
                          {{obj.name}}
                        </div>
                      </div>
                    </div>
                  </transition>
                </div>
              </div>
            </transition>
          </section>
        </div>
      </div>
      <div ref="tabContainer" v-show="item.items[tabIndex]" class="c-pv24 c-ph24" :style="getVerticalSpacing(marginSettings) + getHorizontalSpacing(marginSettings)">
        <common-prod-item
          v-if="prodList.length > 0"
          :borderRadius="borderRadius"
          :imageSetting="imageSetting"
          :marginSettings="marginSettings"
          :headLine="headLine"
          :modelType="48"
          :visible="item.visible"
          :itemList="prodList"
          :orderBy="item.orderBy"
          :templateType="item.templateType"
        ></common-prod-item>
        <loading-status-tem :noData="prodList && prodList.length == 0" noDataText="暂无课程哦~"></loading-status-tem>
        <div class="c-flex-row c-aligni-center c-justify-center">
          <div class="c-fs20 c-textAlign-c c-pt24 c-flex-row c-flex-center" :class="showTabClickMore ? 'c-mr24' : ''" @click="getMore()"
            v-if="showTabMoreData">
            <div class="c-ph20 c-pv8 theme-fc theme-bd1 c-br50" :style="getHeadLineMore(headLine) + getMoreColor(headLine, 1)">点击加载</div>
          </div>
          <div class="c-fs20 c-textAlign-c c-pt24 c-flex-row c-flex-center c-p" @click="clickMore(1)"
            v-if="showTabClickMore">
            <div class="c-ph20 c-pv8 theme-fc theme-bg-10 c-br50" :style="getHeadLineMore(headLine) + getMoreColor(headLine)">查看更多</div>
            <wx-open-launch-weapp
              v-if="showTabLaunchWeapp"
              :id="'launchBtn1'"
              :appId="tabAppID"
              :path="tabWechatUrl"
              class="c-w100 c-h c-text-hidden c-pa c-p-t0 c-p-l0"
              @error="handleErrorFn"
              @launch="handleLaunch"
              @ready="handleReady"
            >
              <script type="text/wxtag-template">
                <style>.masker {width: 100%;height: 40px;opacity: 0}</style>
                <span class="masker">立即跳转</span>
              </script>
            </wx-open-launch-weapp>
          </div>
        </div>
      </div>
    </template>
    <!-- 菜单导航 -->
    <template v-if="item.templateType == 2">
      <div class="c-flex-row c-w100 c-pv24" :style="getVerticalSpacing(marginSettings)">
        <!-- 侧边信息 -->
        <div class="c-ww150 c-h c-flex-1 c-flex-column" ref="scrollTop">
          <div class="c-flex-column" :class="item.position == 2 && cssSupportSticky ? 'sticky' : (isTabFixed ? 'fixed' : 'c-p')">
            <div
              class="c-hh100 c-ww150"
              v-for="(tab, index) in item.items"
              :key="index"
            >
              <div
                class="c-h c-flex-row c-flex-center c-p translucent-balck-04"
                @click.stop="changeTab(index)"
                :class="[tabIndex == index - 1 ? 'c-br-tr10' : '', (tabIndex == index + 1) ? 'c-br-br10' : '']"
              >
                <div
                  class="c-h c-w100 c-flex-row c-flex-center"
                  :class="tabIndex == index ? getTabActiveClass(index) :''"
                  :style="tabIndex == index ? getHeadLineTitle(headLine, 0) : ''"
                >
                  <p class="c-fs22 c-textAlign-c c-w100 c-ph20 c-text-ellipsis2">{{tab.name}}</p>
                  <span class="active" :class="pageTextColor ? 'pageTab' : 'theme-bg'"
                    :style="headLine && headLine.custom == 2 && headLine.title && headLine.title.color ? `background-color: ${headLine.title.color};` : ''"
                    v-if="tabIndex == index"
                  >
                  </span>
                </div>
              </div>
            </div>
          </div>
          <div class="c-flex-1 translucent-balck-04" :class="tabIndex == item.items.length - 1 ? 'c-br-tr10' : ''" v-if="item.position == 1"></div>
        </div>
        <div ref="tabContainer" :class="item.templateType == 2 ? 'w-150' : ''">
          <section class="c-flex-row c-pz99 c-fc-white c-aligni-center c-pb24 c-ph24 c-p" :class="[item.position == 2 && cssSupportSticky ? 'sticky c-pb8' : (isTabFixed ? 'fixed c-pb8' : 'c-p'), !isSetPageBackground ? 'c-bg-white' : 'pageBgColor']" :style="getHorizontalSpacing(marginSettings)" v-if="item.items[tabIndex].childNavigation">
            <div class="c-flex-row c-aligni-baseline c-w100 c-pz99">
              <div class="c-text-hidden c-flex-1">
                <div ref="tabScroll" class="c-contexty-hidden c-contextX-scroll c-flex-row c-aligni-center c-ws-n c-p">
                  <div
                    :style="secondTabIndex == i && headLine && headLine.custom == 2 && headLine.title && headLine.title.color ? `background-color: ${headLine.title.color};` : ''"
                    class="c-mr20 c-p c-flex-shrink0 c-fs22 c-ph12 c-pv8 c-br8"
                    :class="secondTabIndex == i ? (pageTextColor ? 'pageTab' : 'theme-bg') + ' c-fc-white c-bd1-white' : 'c-fc-gray c-bg-f5 bd1-eb'"
                    :id="'tabItem' + i"
                    :key="i"
                    v-for="(obj, i) in item.items[tabIndex].items"
                    @click="changeSecondTab(i)"
                  >{{obj.name}}
                  </div>
                </div>
              </div>
              <div
                v-if="showTabInner"
                class="iconfont c-fs28 c-fs24 c-ml26 c-mt5 c-pz99 close c-fc-gray"
                :class="!isShow ? 'c-rotate180' : ''"
                @click="clickClose"
              >&#xe67a;</div>
            </div>
            <!-- 全部标签半弹窗 -->
            <transition name="fade-opacity50">
              <div class="mask c-m-0auto c-p-t0" @click="clickClose" v-show="isShow">
                <div class="c-pa c-pz100 c-w100 c-p-l0 c-p-r0 c-p-t68 c-m-0auto c-br-bl20 c-br-br20 c-text-hidden">
                  <transition name="fade-translatey">
                    <div class="c-ph24 c-pt20 c-fs24 c-fc-sblack c-bg-white c-p c-pz100 c-w100 c-maxw640" v-show="isShow">
                      <div class="c-fs24 c-fw-b c-pb20">全部分组</div>
                      <div class="c-text-hidden c-flex-row c-flexw-wrap">
                        <div
                          v-for="(obj, i) in item.items[tabIndex].items" :key="i"
                          @click.stop="changeSecondTab(i)"
                          :class="secondTabIndex == i ? 'theme-bg c-fc-white' : 'c-fc-gray c-bg-f5'"
                          class="c-fs22 c-ph12 c-pv8 c-br8 c-mb20 c-mr20"
                        >
                          {{obj.name}}
                        </div>
                      </div>
                    </div>
                  </transition>
                </div>
              </div>
            </transition>
          </section>
          <div class="c-ph24" :style="getHorizontalSpacing(marginSettings)">
            <common-prod-item
              v-if="prodList.length > 0"
              :borderRadius="borderRadius"
              :imageSetting="imageSetting"
              :marginSettings="marginSettings"
              :headLine="headLine"
              :modelType="48"
              :visible="item.visible"
              :itemList="prodList"
              :orderBy="item.orderBy"
              :templateType="item.templateType"
            ></common-prod-item>
            <loading-status-tem :noData="prodList && prodList.length == 0" noDataText="暂无课程哦~"></loading-status-tem>
            <div class="c-flex-row c-aligni-center c-justify-center">
              <div class="c-fs20 c-textAlign-c c-pt24 c-flex-row c-flex-center" :class="showTabClickMore ? 'c-mr24' : ''" @click="getMore()"
                v-if="showTabMoreData">
                <div class="c-ph20 c-pv8 theme-fc theme-bd1 c-br50" :style="getHeadLineMore(headLine) + getMoreColor(headLine, 1)">点击加载</div>
              </div>
              <div class="c-fs20 c-textAlign-c c-pt24 c-flex-row c-flex-center c-p" @click="clickMore(1)"
                v-if="showTabClickMore">
                <div class="c-ph20 c-pv8 theme-fc theme-bg-10 c-br50" :style="getHeadLineMore(headLine) + getMoreColor(headLine)">查看更多</div>
                <wx-open-launch-weapp
                  v-if="showTabLaunchWeapp"
                  :id="'launchBtn1'"
                  :appId="tabAppID"
                  :path="tabWechatUrl"
                  class="c-w100 c-h c-text-hidden c-pa c-p-t0 c-p-l0"
                  @error="handleErrorFn"
                  @launch="handleLaunch"
                  @ready="handleReady"
                >
                  <script type="text/wxtag-template">
                    <style>.masker {width: 100%;height: 40px;opacity: 0}</style>
                    <span class="masker">立即跳转</span>
                  </script>
                </wx-open-launch-weapp>
              </div>
            </div>
          </div>
        </div>
      </div>
    </template>
  </section>
</template>
<script>
import { utilJs } from "@/utils/common.js";
import { goDetails } from "@/utils/goDetails.js";
import { appRouterChange } from "@/mixin/appRouterPush.js";
import { custIndex } from "@/mixin/custIndex.js";
import { customStyle } from '@/utils/customStyle.js'
import loadingStatusTem from "@/components/templates/common/loadingStatusTem.vue";
import CommonProdItem from "@/components/templates/commonProdItem.vue";
export default {
  mixins: [appRouterChange, custIndex, customStyle],
  components: {
    loadingStatusTem,
    CommonProdItem,
  },
  props: {
    item: {
      type: Object,
      default: () => {
        return {}
      },
    },
    pageName: {//首页INDEX 预览页PREVIEW_INDEX 微页面MICRO_PAGE
      type: String,
      default: "INDEX"
    },
  },
  data() {
    return {
      theme: localStorage.getItem("colorName") || "mb5_default",
      tabIndex: 0,
      modules: this.item, // 模块数据
      page: 1,
      ckfrom: global.ckFrom,
      showMore: true,
      showScroll: false, // 标签导航头部内容是否溢出
      tabTop: 0, // 标签导航头部高度
      cssSupportSticky: false,
      isTabFixed: false, // 是否超出模块隐藏
      tabConHeight: 0, // 标签内容高度
      isSetPageBackground: sessionStorage.getItem("isSetPageBackground") || 0,
      pageTextColor: sessionStorage.getItem('pageTextColor') || '',
      showWaterFull: false,
      enableShowModuleView: localStorage.getItem("cfg") ? JSON.parse(localStorage.getItem("cfg")).enableShowModuleView : 1,
      enableHiddenModules: localStorage.getItem("cfg") ? JSON.parse(localStorage.getItem("cfg")).enableHiddenModules : [],
      isWeiXin: false,
      wechatUrl: '',
      appID: '',
      showLaunchWeapp: false,
      showTabLaunchWeapp: false,
      tabAppID: '',
      tabWechatUrl: '',
      isLoading: false,
      secondTabIndex: 0, // 二级导航索引
      prodList: [],
      isShow: false, // 二级导航下拉框
      showTabInner: false, // 二级导航的下拉框按钮判断展示
    };
  },
  watch: {
  },
  computed: {
    // 获取菜单导航侧边栏的选中高亮效果
    getTabActiveClass() {
      return function(index) {
        return `${this.pageTextColor ? 'pageTextColor' : 'theme-fc'} c-fw-b ${index != 0 ? 'c-br-tl10' : ''} c-br-bl10 ${this.isSetPageBackground ? 'pageBgColor' : 'c-bg-white'}`
      }
    },
    // 获取当前对应得tab
    currentTab() {
      return this.item.items[this.tabIndex].childNavigation ? this.item.items[this.tabIndex].items[this.secondTabIndex] : this.item.items[this.tabIndex];
    },
    // 判断tab是否能加载更多
    showTabMoreData() {
      if (!this.currentTab) return false
      if (this.currentTab.from == 1) { // 手动选择
        return this.currentTab.ids.length > 0 && (this.page - 1 < Math.ceil(this.currentTab.ids.length / 8)) && this.showMore;
      } else {
        // from == 2 分组
        if (this.currentTab.type == 1) {
          // 选择数量展示最多就12条数据不需要分页
          return false
        } else {
          return this.showMore
        }
      }
    },
    // 判断显示tab下是否展示查看更多按钮
    showTabClickMore() {
      let item = this.currentTab;
      return item && item.isShowMoreBottom && item.moreInfo
    },
    borderRadius() {
      return this.item.styleParam && this.item.styleParam.borderRadius ? this.item.styleParam.borderRadius : null
    },
    imageSetting() {
      return this.item.styleParam && this.item.styleParam.imageSetting ? this.item.styleParam.imageSetting : null
    },
    marginSettings() {
      return this.item.styleParam && this.item.styleParam.marginSettings ? this.item.styleParam.marginSettings : null
    },
    headLine() {
      return this.item.styleParam && this.item.styleParam.headLine ? this.item.styleParam.headLine : null
    },
  },
  created() {
    this.page = 1;
  },
  mounted() {
    this.isWeiXin = utilJs.isWeiXin();
    this.showLaunchWeapp = false;
    this.showTabLaunchWeapp = false;
    this.appID = '';
    this.tabAppID = '';
    this.showMore = true;
    this.wechatUrl = '';
    this.tabWechatUrl = '';
    this.page = 1;
    this.prodList = [];
    if ((window.CSS && window.CSS.supports) || window.supportsCSS) {
      // 该方法可以判断不同内核的兼容性,较为准确
      this.cssSupportSticky = CSS.supports("(position: sticky) or (position: -webkit-sticky)");
    } else {
      // 自定义方法虽然能判断样式是否兼容，无法判断不同内核是否可以使用
      this.cssSupportSticky = this.cssSupport('position', 'sticky');
    }
    this.$nextTick(() => {
      if (this.$refs.tabHeader && (this.$refs.tabHeader.scrollWidth > this.$refs.tabHeader.clientWidth)) {
        this.showScroll = true;
      } else {
        this.showScroll = false;
      }
    })
    if (this.item && this.item.orderBy == 8) {
      this.showWaterFull = true;
    }
    this.getTabShow();
    this.getMore(1);
  },
  destroyed() {
    if (this.item.position == 2 && this.cssSupportSticky == false && this.$refs.tabContainer) {
      window.removeEventListener('scroll', this.windowScrollFunction);
    }
  },
  methods: {
    // 判断菜单导航
    getTabShow() {
      this.$nextTick(() => {
        if (this.$refs.tabScroll && (this.$refs.tabScroll.scrollWidth > this.$refs.tabScroll.clientWidth)) {
          this.showTabInner = true;
        } else {
          this.showTabInner = false;
        }
        if (document.getElementById('tabItem' + this.secondTabIndex) && this.$refs.tabScroll) {
          let offsetLeft = document.getElementById('tabItem' + this.secondTabIndex).offsetLeft;
          this.$refs.tabScroll.scrollLeft = offsetLeft;
        }
      })
    },
    clickClose() {
      this.isShow = !this.isShow;
    },
    handleLaunch(e) {
      console.log('handleLaunch---', e)
    },
    handleErrorFn(e) {
      this.$showCjToast({
        text: e.errMsg || '无法打开小程序，请升级微信版本',
        type: "warn",
        time: 1500
      })
    },
    handleReady(e) {
      console.log('handleReady---', e)
    },
    clickMore(isTabMore) {
      if (this.pageName == 'PREVIEW_INDEX') {
        return;
      }
      let data = isTabMore ? (this.currentTab ? this.currentTab.moreInfo : null) : this.item.moreInfo;
      if (!data) return
      data.pageName = this.pageName;
      if (data.navId == "linkToMiniProgram") {
        utilJs.checkWxApp(); // 再次调用是为了跳转小程序返回后避免小程序环境值判断错误
        this.$nextTick(() => {
          // 微信需要判断是否是小程序环境 h5跳转采用组件跳转 小程序跳转使用跳转到小程序中间页面再点击跳转到其他小程序
          if (localStorage.getItem('isWxApp')) {
            let query = data.info.appID ? `?appId=${data.info.appID}&path=${encodeURIComponent(JSON.stringify(data.info.wechatUrl))}` : `?shortLink=${encodeURIComponent(data.info.wechatUrl)}`;
            utilJs.miniProgramGoTo('push', '/pages/home/goWxApp/index' + query);
          } else {
            if (!data.info || (data.info && !data.info.appID)) return
            if (isTabMore) {
              this.showTabLaunchWeapp = true;
              this.tabAppID = data.info.appID;
              this.tabWechatUrl = data.info.wechatUrl;
            } else {
              this.showLaunchWeapp = true;
              this.appID = data.info.appID;
              this.wechatUrl = data.info.wechatUrl;
            }
          }
        })
      }
      this.commonModuleRouterPush(data)
    },
    // 判断数据图片是否全部加载
    picLoadComplate(items, initTop, initCon, scrollTo) {
      let that = this;
      let list = items.map((item) => {
        return new Promise((resolve, reject) => {
          let img = new Image();
          img.src = item.cover;
          img.onload = () => resolve(item.cover);
          img.onerror = () => reject(new Error(item.cover + ' load error'));
        })
      });
      Promise.all(list).then(() => {
        if (initTop) that.tabTop = that.$refs.tabInner.offsetTop;
        if (initCon) that.tabConHeight = that.$refs.tabContainer.offsetHeight;
        if (scrollTo) window.scrollTo(0, that.tabTop);
      }).catch((e) => {
        console.log(e);
      })
    },
    // 页面滚动监听
    windowScrollFunction() {
      let scrollTop = window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop;
      // 超出该模块的范围之后，取消吸顶
      if ((scrollTop >= this.tabTop) && (scrollTop <= (this.tabTop + this.tabConHeight + 52))) {
        this.isTabFixed = true;
      } else {
        this.isTabFixed = false;
      }
    },
    // 判断样式是否被兼容
    cssSupport: function (attr, value) {
      let element = document.createElement('div');
      if (attr in element.style) {
        element.style[attr] = value;
        return element.style[attr] === value;
      } else {
        return false;
      }
    },
    // 切换tab
    changeSecondTab(index) {
      if (this.pageName == 'PREVIEW_INDEX' || index == this.secondTabIndex) return
      this.secondTabIndex = index;
      // document.body.style.overflow = 'auto';
      this.showMore = true;
      this.showTabLaunchWeapp = false;
      this.tabAppID = '';
      this.tabWechatUrl = '';
      this.isShow = false;
      this.page = 1;
      this.prodList = [];
      this.getMore();
      this.$nextTick(() => {
        if (this.cssSupportSticky && this.item.position == 2) {
          this.$nextTick(() => {
            this.picLoadComplate(this.prodList, true, false, true);
          })
        } else if (this.item.position == 2 && this.cssSupportSticky == false) {
          this.$nextTick(() => {
            this.picLoadComplate(this.prodList, true, true, true);
          })
        }
        this.showWaterFull = true;
      })
      this.getTabShow();
    },
    // 切换导航到导航内容前
    changeTab(index) {
      if (this.pageName == 'PREVIEW_INDEX' || index == this.tabIndex) return
      this.showWaterFull = false;
      this.tabIndex = index;
      this.secondTabIndex = 0;
      this.showMore = true;
      this.showTabLaunchWeapp = false;
      this.tabAppID = '';
      this.tabWechatUrl = '';
      this.isShow = false;
      this.page = 1;
      this.prodList = [];
      this.getMore();
      this.$nextTick(() => {
        if (this.cssSupportSticky && this.item.position == 2) {
          this.$nextTick(() => {
            this.picLoadComplate(this.prodList, true, false, true);
          })
        } else if (this.item.position == 2 && this.cssSupportSticky == false) {
          this.$nextTick(() => {
            this.picLoadComplate(this.prodList, true, true, true);
          })
        }
        this.showWaterFull = true;
      })
      this.getTabShow();
    },
    // from 1: 手动, 2：分类/分组
    // type 1: 手动填写数量, 2：全部商品
    // catId: 分类id, from=2时传入
    // pgId: 分组id, from=2时传入
    // count: 数量, from=2时传入
    // ids: 手动选择的ids, from=1传入
    // 获取分页数据
    getMore(isFriest) {
      if ((this.pageName == 'PREVIEW_INDEX' && !isFriest) || !this.currentTab) {
        return;
      }
      if (this.isLoading) return
      this.isLoading = true;
      let {type, from, count, catId, pgId} = this.currentTab;
      let data = {
        from: from,
        type: type
      };
      if (from == 1) {
        let ids = this.currentTab.ids.filter((obj, index) => { return (index >= ((this.page - 1) * count)) && (index < ((this.page) * count)) })
        data.ids = ids;
      } else if (from == 2) {
        if (catId && !pgId) {
          data.catId = catId;
        } else if (!catId && pgId) {
          data.pgId = pgId;
        }
        data.offset = this.prodList && this.prodList[this.prodList.length - 1] ? this.prodList[this.prodList.length - 1].offset : 0;
        if (type == 1) {
          data.count = count;
        }
      }
      let that = this;
      utilJs.postMethod(
        global.apiurl + "company/getLabelData", data, (res) => {
          if ((res && res.length == 0) || !res) {
            that.showMore = false;
          } else {
            that.prodList = [...that.prodList, ...res];
            if (that.item.position == 2 && that.cssSupportSticky == false) {
              that.$nextTick(() => {
                that.picLoadComplate(that.prodList, true, true);
              })
            }
            this.page++;
          }
          this.isLoading = false;
        }, failRes => {
          if (that.prodList && that.prodList.length == 0) {
            that.showMore = false;
          }
          this.isLoading = false;
        }
      );
    },
    clickGoDetail(id, type, courseType) {
      if (this.pageName == 'PREVIEW_INDEX') {
        return;
      }
      goDetails(this, type, id, '', courseType, 1);
    }
  },
};
</script>

<style lang="less" scoped>
.tab-icon {
  position: absolute;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  margin-right: 1.1rem;
  height: 0.15rem;
  width: 0.8rem;
  border-radius: 3px;
}
.tabBox {
  -webkit-overflow-scrolling: touch;
}
.sticky {
  position: sticky;
  position: -webkit-sticky;
  top: 0;
}
.boxShadowWhite {
  box-shadow: 0 -1px #FFFFFF;
}
.fixed {
  position: fixed;
  width: 100%;
  top: 0;
}
.tabActive {
  position: absolute;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 0.8rem;
  height: 0.15rem;
  border-radius: 3px;
}
.pageTab {
  background:var(--pageTextColor);
}
.tabHeight {
  height: 52px;
}
.c-maxh220 {
  max-height: 5.5rem;
}
.icon {
  transform: scale(0.8);
}
.w50-12 {
  width: calc(50% - 0.3rem);
}
.w100-12 {
  width: calc(100% - 0.3rem);
}
.fade-translatey-enter-active{
  animation: showTranslatey 0.6s forwards;
}
.fade-translatey-leave-active{
  animation: hideTranslatey 0.6s forwards;
}
@keyframes showTranslatey {
  from {
    transform: translateY(-100%);
  }
  to {
    transform: translateY(0);
  }
}
@keyframes hideTranslatey {
  from {
    transform: translateY(0);
  }
  to {
    transform: translateY(-100%);
  }
}
/* 弹窗出现透明度动画 */
.fade-opacity50-enter-active{
  animation: showOpacity50 0.5s forwards;
}
.fade-opacity50-leave-active{
  animation: hideOpacity50 0.5s forwards;
}
@keyframes showOpacity50 {
  from {
    opacity: 0.5;
  }
  to {
    opacity: 1;
  }
}
@keyframes hideOpacity50 {
  from {
    opacity: 1;
  }
  to {
    opacity: 0.5;
  }
}
.active {
  position: absolute;
  top: 0.95rem;
  left: 0.1rem;
  width: 0.15rem;
  height: 0.6rem;
  border-radius: 0.1rem;
  content: "";
}
.w-150 {
  width: calc(100% - 3.75rem);
}
.fwb {
  font-weight: bold !important;
}
.bd1-eb {
  border: 1px solid #ebebeb;
}
.translucent-balck-04 {
  background-color: rgba(0, 0, 0, 0.04)
}
</style>
